{% extends '/layout.html'%}

{% block title %}
    {{ current_user.uclass.name }} | 小白鼠
{% endblock %}

{% block body %}
<h1>{{ current_user.uclass.name }}班 | 共<span id="member_count">0</span>人</h1>
<div id="member_list">
<!--    {% for user in users %}-->
<!--    <div style="float: left; width: 60px; height: 30px; background-color: {{ user.get_listen_color()}};">{{ user.fullname }}</div>-->
<!--    {% endfor %}-->
</div>


<img id="change_listen_status_button" style="width: 50px" src="/static/image/{{ current_user.current_listen_status }}.png">
<span id="listen_status" style="display: none;">{{ current_user.current_listen_status }}</span>

<script>
    // 动态获取成员列表并渲染页面
    function render_member_list(){
        $.getJSON('{{ url_for("users.member_users", class_id=current_user.uclass.id) }}', function (data) {

            //  清空member_list结点下的子孙结点
            $('#member_list').empty();
            $('#member_count').text(data.length + '');

            for (var i = 0; i < data.length; i++) {
                item = data[i];
                var fullname = item['fullname'];
                var listen_color = item['listen_color'];
                var div_str = '<div style="color: white;float:left;width:60px;height:30px;' +
                    'background-color:' + listen_color + ';">' + fullname + '</div>';

                $('#member_list').append($(div_str));
            }

        });
    }

    //等到页面元素加载成功
    $(document).ready(function () {
        // 渲染成员列表
        render_member_list();

        // 绑定事件
        $('#change_listen_status_button').click(function () {

            // 获取当前状态
            var listen_status = $('#listen_status').text();

            var flag = '';
            if (listen_status == 'go'){
                flag = 'stop';
            }else if (listen_status == 'stop') {
                flag = 'go';
            }

            // 调用更改状态的接口
            var json_data = {'listen_status': flag};

            $.post("{{ url_for('users.change_listen_status') }}",

                JSON.stringify(json_data), function (data) {
                    // alert(json_data);

            });
            var img_src = "/static/image/" + flag + ".png";

            // 修改元素属性
            $('#change_listen_status_button').attr('src', img_src);

            $('#listen_status').text(flag);
        });

        //定时更新成员页面
        setInterval(render_member_list, 1000);

    });

</script>

{% endblock %}